<!-- @author zjw -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>空气质量信息展示页</title>
    <link rel="stylesheet" href="static/css/layui.css">
</head>
<body>
<!-- 标题 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>空气质量检测信息库</legend>
</fieldset>

<!-- 下拉列表的表单 -->
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">区域查询：</label>
            <div class="layui-input-inline">
                <select name="district" id="district">
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="search">查询</button>
        </div>
    </div>
</form>

<!-- 展示数据的表格 -->
<table class="layui-hide" id="airList" lay-filter="airList"></table>

<!-- 表格的头部工具 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i
                class="layui-icon layui-icon-addition"></i>
        </button>
    </div>
</script>

<!-- 表格的行工具 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="static/layui.js"></script>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            $ = layui.$,
            form = layui.form;

        // 渲染table
        table.render({
            'elem': '#airList'
            , 'id': 'airList'
            , 'url': 'http://localhost:8080/air/list'   // {code:0,msg:"",count:14,data:[{},{}]}
            , 'page': true
            , 'toolbar': '#toolbarDemo'
            , 'cols': [[
                {type: "checkbox", fixed: "left"},
                {field: "id", title: "序号"},
                {field: "districtName", title: "区域"},
                {field: "monitorTime", title: "检测时间"},
                {field: "pm10", title: "pm10"},
                {field: "pm25", title: "pm2.5"},
                {field: "monitoringStation", title: "监测站"},
                {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
        });

        // 发送ajax请求获取区域数据，填充到district下拉列表
        $.ajax({
            url: "http://localhost:8080/district/list",
            data: null,
            type: "GET",
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    var jsonArray = res.data;
                    var content = "<option value='0'>请选择区域</option>";
                    for (var i = 0; i < jsonArray.length; i++) {
                        content += "<option value='" + jsonArray[i].id + "'>" + jsonArray[i].name + "</option>";
                    }
                    // 插入到下拉列表的标签体内
                    $("#district").html(content);
                    // 重新渲染form
                    form.render('select');

                } else {
                    // 凉凉~~
                    layer.msg(res.msg);
                }
            },
            error: function () {
                layer.msg("凉凉~~");
            }
        });

        // 点击查询按钮，触发事件
        form.on('submit(search)', function (data) {
            // 获取到区域id
            var districtId = data.field.district;
            // 让table重载
            table.reload('airList', {
                where: {
                    districtId: districtId
                },
                page: {
                    curr: 1
                }
            });
            // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
            return false;
        });

        // 触发头部工具栏事件
        table.on('toolbar(airList)', function (obj) {
            var event = obj.event;
            switch (event) {
                case 'add':
                    // 添加操作
                    layer.open({
                        type: 2,
                        content: 'add.html',
                        area: ['600px', '400px'],
                        title: '添加空气质量信息'
                    });
                    break;
                case 'bulkDelete':
                    // 批量删除
                    break;
                default:
            }
        });

        // 触发行工具栏事件
        table.on('tool(airList)', function (obj) {
            //1. 获取当前行数据和点击的按钮
            var data = obj.data;
            var event = obj.event;
            //2. 判断
            switch (event) {
                case 'edit':
                    // 将当前行的id，存储到sessionStorage中
                    layui.sessionData('air', {
                        key: 'air'
                        , value: data
                    });
                    layer.open({
                        type: 2,
                        content: 'edit.html',
                        area: ['600px', '440px'],
                        title: '修改空气质量信息',
                        end: function () {
                            var air = layui.sessionData('airEdit').airEdit;
                            obj.update(air);
                            layui.sessionData('airEdit', {
                                key: 'airEdit'
                                , remove: true
                            });
                        }
                    });
                    break;
                case 'del':
                    layer.confirm('真的删除行么', function (index) {
                        // 删除当前行数据
                        var id = data.id;
                        // 发送ajax请求，删除当前行数据
                        $.getJSON(
                            "http://localhost:8080/air/delete",
                            {
                                id: id
                            },
                            function (res) {
                                if (res.code == 0) {
                                    // 删除成功
                                    layer.msg("删除成功！")
                                    obj.del();
                                } else {
                                    layer.msg(res.msg);
                                }
                            }
                        );
                    });

                    break;
                default:
            }
        });
    });
</script>
</body>
</html>